<script lang="ts" setup>
  import { ref,nextTick } from "vue"
  import gmDrawer from '@/components/Drawer/index.vue'
  import { cloneDeep } from "lodash-es"
  import {  carSaveOrUpdate, carGetDetails } from "@/api/vehicle/vehicle"
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'
  import useFile from '@/hooks/useFile'
  import AdminSelect from '@/components/AdminSelect/index.vue'
  import CompanySelect from '@/components/CompanySelect/index.vue'
  import CustomerSelect from '@/components/CustomerSelect/index.vue'
  import carSelect from '@/components/carSelect/index.vue'
  let fileUploadBtn =ref<any>()
  interface Props {
    id?: number
  }

  const props = withDefaults(defineProps<Props>(), {
    id: 0,
  })

  const form = ref<any>({})
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDrawer>>()
  const emit = defineEmits(['cancel','success'])
  const storeList = ref<any>([])

  const rules: FormRules = {
    adminId: [
      { required: true, message: '请输入负责人', trigger: 'change' },
    ],
    carNo: [
      { required: true, message: '请输入车牌号', trigger: 'change' },
    ],
    companyId:[
      { required: true, message: '请输入所属公司', trigger: 'change' },
    ],
    // customIds: [
    //   { required: true, message: '请选择客户', trigger: 'change' },
    // ],
    type: [
      { required: true, message: '请选择车辆类型', trigger: 'change' },
    ],
    // imei: [
    //   { required: true, message: '请输入设备编码', trigger: 'change' },
    // ],
  }

  const { handleSubmit } = useForm({formType: 'dialog', emit:emit})
  const { beforeUpload, uploadUrl,uploadImage } = useFile({maxSize: 10, fileType: 'image'})
  const cancel = ()=>{
    emit('cancel')
  }

  const success =  ()=>{
    const params = {
      ...form.value,
    }

    form.value.pic = form.value.pics.join(',')
    let newForm={
      carId:form.value.carId,
      carNo:form.value.carNo,
      status:form.value.status,
      adminId:form.value.adminId,
      pic:form.value.pic,
      companyId:form.value.companyId,
      type:form.value.type,
      imei:form.value.imei
    }
    console.log(newForm,'newForm')
    handleSubmit(carSaveOrUpdate, formRef.value, newForm, dialogRef.value)
  }

  const getData = () => {
    form.value={}
    carGetDetails({id:props.id}).then((res: any)=>{
      form.value = res
      form.value.pics = res.pic ? res.pic.split(',') : []
      console.log(form.value,'form.value')
    })
  }
  const handleChange = (e: any)=>{
    console.log(e,'eeeee')
    form.value.carNo=e.carNo
  }

  if(props.id) getData()

  const handleUploadSuccess = (res: any, file: any) => {
   
    form.value.pics.push(res.result)
    console.log(form.value,'resresres')
    nextTick(() => {
      // 清空上传组件的文件列表
      if (fileUploadBtn.value) {
        fileUploadBtn.value.clearFiles();
        // 重置 input 的值，确保下次选择相同文件也能触发
        const input = fileUploadBtn.value.$el.querySelector('input[type="file"]') as HTMLInputElement;
        if (input) {
          input.value = '';
        }
      }
    });
  }
  const handleUploadDel = (src: string) => {
    console.log(src, 'sev', form.value.pics)
    form.value.pics = form.value.pics.filter((i) => i !== src)
  }
</script>

<template>
  <gmDrawer
      :title="!props.id ? '新增车辆' : '编辑车辆'"
      @close="cancel"
      @comfirm="success"
      ref="dialogRef"
      size="800px"
    >
      <div class="fieldTable">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="top">
          <el-row :gutter="20" class="form-card-main">
            <el-col :span="12">
              <el-form-item label="车牌号" prop="carNo">
                <el-input v-model="form.carNo" style="width: 100%" placeholder="请输入"/>
                <!-- <carSelect v-model="form.carId" :multiple="false" width="100%" @change="handleChange"></carSelect> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-input v-model="form.status" style="width: 100%" placeholder="请输入"/>
                <!-- <carSelect v-model="form.carId" :multiple="false" width="100%" @change="handleChange"></carSelect> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人" prop="adminId">
                 <AdminSelect v-model="form.adminId" :multiple="false" width="100%"></AdminSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属公司" prop="companyId">
                 <CompanySelect v-model="form.companyId" :multiple="false" width="100%"></CompanySelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户" prop="customIds">
                <CustomerSelect v-model="form.customIds" :multiple="true" width="100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆类型" prop="type">
                <!-- <el-select style="width:200px;" clearable v-model="form.type" placeholder="请选择">
                  <el-option label="大型" :value="0"></el-option>
                  <el-option label="中型" :value="1"></el-option>
                  <el-option label="小型" :value="2"></el-option>
                  <el-option label="其他" :value="3"></el-option>
                </el-select> -->
                <el-input v-model="form.type" style="width: 100%" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备编码" prop="imei">
                <el-input v-model="form.imei" placeholder="请输入设备编码" clearable style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图片" prop="pics">
                <el-upload
                  ref="fileUploadBtn"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="handleUploadSuccess"
                  :before-upload="beforeUpload">
                  <el-icon class="upload-img-action"><Plus /></el-icon>
                </el-upload>
                <div class="form-value-flex" v-if="form.pics&&form.pics.length>0">
                  <uploadImage v-for="item in form.pics" :src="item" @del="handleUploadDel(item)" class="upload-img-image" />
                </div>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </div>
    </gmDrawer>
</template>


<style lang="scss" scoped>

</style>
